import { FC, useRef } from 'react';
import { Pagination, PaginationProps, Spin } from 'antd';
import StockItem from '../stock-item';
import useContainer from '@/hooks/use-container';

export interface StockListProps {
  loading?: boolean;
  dataSource?: any[];
  total?: PaginationProps['total'];
  current?: PaginationProps['current'];
  pageSize?: PaginationProps['pageSize'];
  onChange?: PaginationProps['onChange'];
}

const StockList: FC<StockListProps> = ({ loading, dataSource, total, current, pageSize, onChange }) => {
  const containerRef: any = useRef<HTMLDivElement>();
  const { height } = useContainer(containerRef);
  const scrollRef: any = useRef<HTMLDivElement>();

  return (
    <div ref={containerRef} className="flex flex-col mt-4" style={{ height }}>
      <div className="flex-1 overflow-auto" ref={scrollRef}>
        {loading && (
          <div className="flex h-full justify-center items-center flex-col">
            <Spin size="large" />
            <div className="mt-5 text-xl font-medium">加载中...</div>
          </div>
        )}
        {!loading &&
          dataSource?.map((item: any) => {
            return <StockItem {...item} key={item?.code} />;
          })}
      </div>
      <Pagination
        className="mt-4"
        showQuickJumper
        total={total}
        current={current || 1}
        pageSize={pageSize || 10}
        onChange={(...args) => {
          scrollRef.current.scrollTop = 0;
          onChange?.(...args);
        }}
      />
    </div>
  );
};

export default StockList;
